/** * @description: 谈心谈话记录 */
<template>
  <div class="pub-container">
    <van-tabs v-model="active" swipe-threshold="4" title-active-color="#2E6CF6" title-inactive-color="#5F5F6B" line-width="24">
      <van-tab v-for="(item, index) of fiveHardList" :key="index" :title="item">
        <div class="tab-content">
          <div class="floor">
            <div class="title">
              <p>
                <span>2022/10/10</span>
                <span>面谈</span>
              </p>
              <span>经济谈心谈话</span>
            </div>
            <div class="floor-content">
              <p>
                <label>提交人</label>
                <span>15755123148</span>
              </p>
              <p>
                <label>提交时间</label>
                <span>15755123148</span>
              </p>
              <p>
                <label>访谈方式</label>
                <span>15755123148</span>
              </p>
              <p>
                <label>访谈地点</label>
                <span>15755123148</span>
              </p>
              <p>
                <label>信息来源</label>
                <span>15755123148</span>
              </p>
              <p>
                <label>访谈类型</label>
                <span>15755123148</span>
              </p>
              <p>
                <label>访谈内容</label>
                <span>实习日期已结束，学校通知返校进行毕 业生实习答辩</span>
              </p>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  name: 'TalkRecord',
  data() {
    return {
      fiveHardList: ['全部', '行为', '心理', '学业', '经济', '思想'],
      active: 0,
    }
  },
}
</script>

<style lang="scss" scoped>
.tab-content {
  .floor {
    .title {
      @include fcb();
      height: 38px;
      font-size: $fz12;
      color: #97979f;
      padding: 0 12px;
      background: #f4f6fa;
      p {
        span + span {
          margin-left: 20px;
        }
      }
    }
    &-content {
      background: $bg-white;
      p {
        display: flex;
        align-items: center;
        height: 50px;
        padding: 0 12px;
      }
      label {
        width: 120px;
        font-size: $fz14;
        color: #97979f;
      }
      span {
        font-size: $fz14;
        line-height: 20px;
        color: $color-title;
      }
    }
  }
}
::v-deep {
  .van-tabs__nav {
    > div {
      width: 19%;
    }
    > div:first-child {
      width: 24%;
    }
  }
  .van-tabs__line {
    background: #2e6cf6;
  }
}
</style>
